<template>
    <div>
        <el-form :inline="true" class="demo-form-inline" :model="cForm">
            <el-form-item label="一级分类" label-width="100px" style="margin: auto 20px;">
                <el-select placeholder="请选择" v-model="cForm.category1Id" @change="handle1" style="width: 280px;"
                    :disabled="isShow">
                    <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in list1" :key="c1.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="二级分类" label-width="100px" style="margin: auto 20px;">
                <el-select placeholder="请选择" v-model="cForm.category2Id" @change="handle2" style="width: 280px;"
                    :disabled="isShow">
                    <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in list2" :key="c2.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="三级分类" label-width="100px" style="margin: auto 20px;">
                <el-select placeholder="请选择" v-model="cForm.category3Id" @change="handle3" style="width: 280px;"
                    :disabled="isShow">
                    <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in list3" :key="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: "CategorySelect",
        mounted() {
            // 组件挂载完毕时获取一级分类的数据
            this.getCategoryList1()

        },
        props: [
            'isShow'
        ],
        data() {
            return {
                list1: [], // 一级分类列表
                list2: [], // 二级分类列表
                list3: [], // 三级分类列表
                cForm: { //收集表单数据
                    category1Id: "", // 一级分类id
                    category2Id: "", // 二级分类id
                    category3Id: "", // 三级分类id
                }
            }
        },
        methods: {
            // 发送请求获取一级分类的数据
            async getCategoryList1() {
                const result = await this.$api.attr.reqCategoryList1()
                if (result.code === 200) {
                    this.list1 = result.data // 将一级分类数据存储在本地
                }
            },
            // 切换一级分类下拉框选项时触发的回调函数
            async handle1(category1Id) {
                this.$emit('getCategoryId', { categoryId: category1Id, level: 1 }) // 通过自定义事件向父组件传递参数

                // 切换一级分类选项时清除二，三级数据以及id
                this.list2 = []
                this.list3 = []
                this.cForm.category2Id = ''
                this.cForm.category3Id = ''

                // 发送请求获取二级分类数据
                const result = await this.$api.attr.reqCategoryList2(category1Id)
                if (result.code === 200) {
                    this.list2 = result.data // 将二级分类数据存储在本地
                }
            },
            // 切换二级分类下拉框选项时触发的回调函数
            async handle2(category2Id) {
                this.$emit('getCategoryId', { categoryId: category2Id, level: 2 }) // 通过自定义事件向父组件传递参数

                // 切换二级分类选项时清除三级数据以及id
                this.list3 = []
                this.cForm.category3Id = ''

                // 发送请求获取三级分类数据
                const result = await this.$api.attr.reqCategoryList2(category2Id)
                if (result.code === 200) {
                    this.list3 = result.data // 将三级分类数据存储在本地
                }
            },
            // 切换三级分类下拉框选项时触发的回调函数
            async handle3(category3Id) {
                this.$emit('getCategoryId', { categoryId: category3Id, level: 3 }) // 通过自定义事件向父组件传递参数
            }
        },
    }
</script>
<style scoped>

</style>